<template>
	<div id="header">
		<div class="center">
			<img src="../assets/images/logo.png" alt="" class="logo" @click="back()">
			<ul class="menu">
				<li class="menu-item">
					<router-link to="/home">首页</router-link>
				</li>
				<li class="menu-item">
					<router-link to="/about">关于正荣</router-link>
				</li>
				<li class="menu-item">
					<router-link to="/product">核心产品</router-link>
				</li>
				<li class="menu-item">
					<router-link to="/case">案例赏析</router-link>
				</li>
				<li class="menu-item">
					<router-link to="/news">新闻资讯</router-link>
				</li>
				<li class="menu-item">
					<router-link to="/branch">服务网点</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			back() {
				this.$router.push("/home")
			}
		}
	}
</script>

<style lang="less" scoped>
	#header {
		display: flex;
		justify-content: center;
		height: 100px;
	}

	.center {
		width: 1200px;
		box-sizing: border-box;
		padding: 0px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 40%;
		height: auto;
		margin-left: -70px;
		margin-top: -7px;
		cursor: pointer;
	}

	.menu {
		display: flex;
	}

	.menu-item {
		text-align: center;
		margin-left: 20px;
	}

	a {
		color: #999;
		padding: 10px 10px;
	}

	a:hover {
		text-decoration: none;
		background-color: #48cfad;
		color: #fff;
		border-radius: 2px;
	}
</style>
